<template>
  <div class="write">
    <!-- form 表单-->
    <Write ref="write" :senderEmail="form.senderEmail" :emailSubject="form.emailSubject" @review="review"
           @getSendEmail="getSendEmail"
           @getInfoWrite="getInfoWrite" @toApproval="toApproval"></Write>
    <!-- 编辑器操作-->
    <MakeBtn ref="makeBtn" @getInfoMake="getInfoMake"></MakeBtn>
    <!--发件人信息-->
    <div class="info">
      <h1>发件人: {{form.senderNickName}}</h1>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="紧急"></el-checkbox>
        <el-checkbox label="回执"></el-checkbox>
        <el-checkbox label="定时发送"></el-checkbox>
        <el-checkbox label="追踪邮件"></el-checkbox>
      </el-checkbox-group>
    </div>
    <!--操作按钮-->
    <div class="make-btn">
      <el-button class="active" @click="$refs.write.toApproval()"><i class="icon-fasong iconfont"></i>提交审批</el-button>
    </div>
    <DialogTargetTime ref="dialogTargetTime" @getRightTime="getRightTime"></DialogTargetTime>
    <DialogApproval ref="dialogApproval" @reset="reset" :isApprovalDetail="isApprovalDetail"></DialogApproval>
  </div>
</template>
<script>
    import Write from '@/components/mail/approval/apply/ApplyWrite'
    import MakeBtn from '@/components/mail/write/MakeBtn'
    import {mapState, mapGetters} from 'vuex'
    import {getMailDetail} from "@/api/mail/make"
    import DialogApproval from '@/components/mail/DialogApprovalEdit'
    import DialogTargetTime from '@/components/mail/DialogTargetTime'

    export default {
        name: 'edit',
        props: {
            targetEmail: {
                default: ''
            }
        },
        components: {Write, MakeBtn, DialogTargetTime, DialogApproval},
        data() {
            return {
                form: {
                    addresseeEmail: [],//收件人邮箱数组
                    emailCarbonCopy: [],//抄送数组
                    emailSecretDelivery: [],//密送数组
                    emailHtmlpicList: [],//附件列表
                    emailSubject: '',//主题
                    emailContent: '',//邮件内容
                    emailReceipt: 0,//是否回执 0-默认不回执，1-回执
                    emaileDelivery: 0,//投递状态  （紧急与非紧急） 0-默认常规，1-紧急
                    monocula: 0,//群发单显
                    emailTrack: 0,//0 - 不追踪  1 - 追踪
                    emailSendTiming: '', //邮件定时发送时间
                    senderEmail: '',//发件人邮箱
                    senderNickName: '',//发件人昵称
                    boxId: '',
                    emailOriginalId: ''
                },
                checkList: [],
                content: '',
                old: {},
                row: {},
                isApprovalDetail: 0
            }
        },
        watch: {
            checkList(val, old) {
                let el = this.getArrDifference(val, old);
                if (el[0] == '定时发送') {
                    if (!old.includes('定时发送')) {
                        this.$refs.dialogTargetTime.init();
                    } else {
                        this.form.emailSendTiming = '';
                    }
                }
            }
        },
        computed: {
            ...mapState(['common']),
            ...mapGetters(["userInfo"]),
        },
        created() {
            this.isApprovalDetail = this.$route.query.isApprovalDetail;
            this.row = JSON.parse(this.$route.query.row);
            this.getDetail();
        },
        methods: {
            //提交审批
            toApproval(params) {
                this.form.emailReceipt = this.form.emaileDelivery = this.form.emailTrack=0;
                this.checkList.map(item => {
                    if (item === '回执') {
                        this.form.emailReceipt = 1;
                    } else if (item === '紧急') {
                        this.form.emaileDelivery = 2;
                    } else if (item === '追踪邮件') {
                        this.form.emailTrack = 1;
                    }
                })
                this.form = Object.assign({}, this.form, params);
                if (this.getParams()) {
                    let msg = '';
                    if (this.form.emailSecretDelivery.length > 20) {
                        msg = '密送人最多不超过20个！'
                    }
                    if (this.form.emailCarbonCopy.length > 20) {
                        msg = '抄送人最多不超过20个！'
                    }
                    if (this.form.addresseeEmail.length > 30) {
                        msg = '收件人最多不超过30个！'
                    }
                    if(msg){
                        this.$confirm(' <div style="margin: 20px 10px;">\n' +
                            '        <p style="line-height: 30px;font-size: 14px;">'+msg+'</p></div>', '提示', {
                            dangerouslyUseHTMLString: true,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            confirmButtonText: '确 定',
                        }).then(() => {
                            return;
                        }).catch(() => {
                            return;
                        })
                    }
                    const target = JSON.parse(JSON.stringify(this.form));
                    this.$refs.dialogApproval.init(target, this.row);
                }
            },
            getArrDifference(arr1, arr2) {
                return arr1.concat(arr2).filter(function (v, i, arr) {
                    return arr.indexOf(v) === arr.lastIndexOf(v);
                });
            },
            getDetail() {
                getMailDetail(this.row.emailInfoId).then(res => {
                    if (res.data.success) {
                        let detail = res.data.data;
                        this.form = Object.assign({}, this.form, detail);
                        this.form.emailOriginalId = this.$route.query.id;
                        if (this.form.emailSendTiming != '') {//存在 - 不为空
                            this.checkList.push('定时发送');
                            this.$refs.dialogTargetTime.initData(this.form.emailSendTiming);
                        }
                        this.form.emailReceipt = parseInt(detail.emailReceipt);
                        this.form.emaileDelivery = parseInt(detail.emaileDelivery);
                        if (this.form.monocular == 1) this.checkList.push('群发单显');
                        if (this.form.emailReceipt == 1) this.checkList.push('回执');
                        if (this.form.emaileDelivery == 2) this.checkList.push('紧急');
                        if (this.form.emailTrack == 1) this.checkList.push('追踪邮件');
                        let params = {
                            senderEmail: detail.senderEmail,//发件人
                            addresseeEmail: detail.addresseeEmail ? detail.addresseeEmail.split(",") : [],//收件人
                            isCarbonCopy: this.form.emailCarbonCopy.length == 0 ? false : true,
                            emailCarbonCopy: detail.emailCarbonCopy ? detail.emailCarbonCopy.split(",") : [],//抄送
                            isSecretDelivery: this.form.emailSecretDelivery.length == 0? false : true,
                            emailSecretDelivery: detail.emailSecretDelivery? detail.emailSecretDelivery.split(",") : [],//密送
                            emailSubject: this.form.emailSubject,//主题
                            monocular: this.form.monocular == 1 ? true : false
                        }
                        //初始化顶部组件
                        this.$refs.write.init(params)
                        //初始化编辑器
                        this.$refs.makeBtn.init({
                            emailContent: "<br><br><br>" + this.form.emailContent,
                            emailHtmlpicList: this.form.emailHtmlpicList,
                            monocular: this.form.monocular == 1 ? true : false
                        });
                    }
                })
            },
            //预览
            review(params) {
                let info = Object.assign({}, this.form, params);
                let routeUrl = this.$router.resolve({
                    name: '/mail/write/Review',
                    query: {
                        info: JSON.stringify(info)
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
            getParams() {
                if (this.form.senderEmail == '') {
                    this.$message({
                        duration: 1500,
                        message: '请选择发件人邮箱',
                        type: "success"
                    });
                    return false
                } else if (this.form.addresseeEmail.length === 0) {
                    this.$message({
                        duration: 1500,
                        message: '请输入收件人邮箱',
                        type: "success"
                    });
                    return false
                } else if (!this.form.emailSubject) {
                    this.$message({
                        duration: 1500,
                        message: '请输入主题',
                        type: "success"
                    });
                    return false
                } else if (!this.form.emailContent) {
                    this.$message({
                        duration: 1500,
                        message: '请输入邮件内容',
                        type: "success"
                    });
                    return false
                } else {
                    return true
                }
            },
            getInfoMake(params) {//文本编辑器数据 + 附件数据 emailContent emailHtmlpicList
                this.form = Object.assign({}, this.form, params)
            },
            getSendEmail(email) {
                this.form.senderEmail = email;
            },
            getInfoWrite(params) { //顶部数据 - 点击发送按钮触发
                this.form = Object.assign({}, this.form, params);
                this.sendEmail(params.sendType)
            },
            //重置数据
            reset() {
                this.$refs.write.init('')//重置顶部组件
                this.$refs.makeBtn.init('');//重置编辑器
                this.bus.$emit('refreshEmailNum')
                this.form = {
                    addresseeEmail: [],//收件人邮箱数组
                    emailCarbonCopy: [],//抄送数组
                    emailSecretDelivery: [],//密送数组
                    emailHtmlpicList: [],//附件列表
                    emailSubject: '',//主题
                    emailContent: '',//邮件内容
                    emailReceipt: 0,//是否回执 0-默认不回执，1-回执
                    emaileDelivery: 0,//投递状态  （紧急与非紧急） 0-默认常规，1-紧急
                    emailTrack: 0,//0 - 不追踪  1 - 追踪
                    senderEmail: '',//发件人邮箱
                    senderNickName: this.userInfo.account,//发件人昵称,
                    boxId: ''
                }
                this.checkList = [];

            },
            getRightTime(time) {//回调时间
                this.form.emailSendTiming = time;
                if (time != '') {
                    this.checkList.push('定时发送')
                }
            },
            dealCheck(checkList) {
                let state = false;
                checkList.map(item => {
                    if (item === '定时发送') {
                        state = true;
                    }
                })
                if (state) {//选择时间
                    const index = this.checkList.indexOf("定时发送");
                    this.checkList.splice(index, 1);
                    this.$refs.dialogTargetTime.init();
                } else { //清空时间
                    this.form.emailSendTiming = '';
                }
            },
        }
    }
</script>

<style lang="scss">
  $bgActiveColor: #E9F3FD;
  $fontColor: #2A97F9;
  $lineColor: #F3F3F3;
  .write {
    padding: 15px;
    margin: 0;
    border-radius: 10px;
    background-color: #fff;
    height: auto;

    .el-select.footSend {
      width: auto;
    }

    button.el-button.el-button--default {
      line-height: 30px;
      padding: 0 15px;

      i {
        margin-right: 5px;
      }
    }

    button.el-button.el-button--default.active {
      background-color: $bgActiveColor;
      color: $fontColor;
    }

    .edit {
      height: 450px;
      background-color: #F3F3F3;
    }

    .info {

      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;

      h1 {
        font-size: 15px;
        color: #1B2242;
        margin-right: 30px;
        padding: 0;
        font-weight: normal;
      }
    }

    .make-btn {
      margin-bottom: 50px;
    }
  }
</style>


